<template>
  <echarts-core class="echarts-gradient-multi-line" :option="chartsOption" style="width: 100%; height: 200px" />
</template>

<script>
import { merge } from 'lodash-es';
import EchartsCore, { Echarts } from './EchartsCore.vue';
export default {
  name: 'echarts-gradient-multi-line',
  components: { EchartsCore },
  props: {
    title: { type: String, default: '' },
    axisData: { type: Array, default: () => [] },
    seriesData: { type: Array, default: () => [{ name: '', color: [], data: [] }] },
    config: { type: Object, default: () => ({ grid: {}, legend: {}, tooltip: {}, xAxis: {}, yAxis: {} }) },
  },
  data() {
    return {
      defaultGradient: [
        { offset: 0, color: 'rgba(255,98,17,0.6)' },
        { offset: 1, color: 'rgba(255,98,17,0)' },
      ],
    };
  },
  computed: {
    chartsOption() {
      const { grid, xAxis, legend, tooltip, yAxis } = this.config;
      return {
        legend: Object.assign(
          {
            // icon: 'rect', itemGap: 20, itemHeight: 6, itemWidth: 18
          },
          legend
        ),
        tooltip: merge(
          {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          tooltip
        ),
        grid: Object.assign(
          {
            top: '6%',
            left: '2%',
            right: '8%',
            bottom: 0,
            containLabel: true,
          },
          grid
        ),
        xAxis: [
          merge(
            {
              type: 'category',
              boundaryGap: false,
              data: this.axisData,
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.8)',
                },
              },
            },
            xAxis
          ),
        ],
        yAxis: [
          merge(
            {
              type: 'value',
              minInterval: 1,
              splitLine: { show: false },
              axisLine: {
                show: true,
                lineStyle: { color: 'rgba(255,255,255,0.8)' },
              },
            },
            yAxis
          ),
        ],
        series: this.seriesData.map((item) => {
          return merge(
            {
              type: 'line',
              smooth: true,
              icon: 'circle',
              emphasis: {
                focus: 'series',
              },
            },
            item,
            {
              name: item.name,
              data: item.data,
              itemStyle: {
                color: this.getLinearColor(item.color),
              },
              areaStyle: {
                color: this.getLinearGradientGraphic(item.color),
              },
            }
          );
        }),
      };
    },
  },
  methods: {
    getLinearColor(color) {
      const colors = color && color.length ? color : this.defaultGradient;
      return colors[0].color;
    },
    getLinearGradientGraphic(color) {
      const colors = color && color.length ? color : this.defaultGradient;
      return new Echarts.graphic.LinearGradient(0, 0, 0, 1, colors);
    },
  },
};
</script>

<style></style>
